import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {NzCarouselComponent} from 'ng-zorro-antd';
import {map} from 'rxjs/operators';
import {Store} from '@ngrx/store';

import {HomeService} from '../../services/home.service';
import {SingerService} from '../../services/singer.service';
import {SheetService} from '../../services/sheet.service';
import {Banner, HotTags, Singer, SongSheet} from '../../data-types/common.types';
import {AppStoreModule} from '../../store';
import * as PlayActions from '../../store/actions/player.action';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

  @ViewChild(NzCarouselComponent, {static: true}) private nzCarousel: NzCarouselComponent;

  public carouselActiveIndex: number;

  public banners: Array<Banner>;

  public hotTags: Array<HotTags>;

  public songSheetList: Array<SongSheet>;

  public singers: Array<Singer>;

  constructor(
    private homeService: HomeService,
    private singerService: SingerService,
    private sheetService: SheetService,
    private route: ActivatedRoute,
    private store$: Store<AppStoreModule>
  ) {
    this.route.data.pipe(map(res => res.homeDatas)).subscribe(res => {
      const [banners, hotTags, songSheetList, singers] = res;
      this.banners = banners;
      this.hotTags = hotTags;
      this.songSheetList = songSheetList;
      this.singers = singers;
    });

    this.carouselActiveIndex = 0;
  }

  ngOnInit(): void {
  }

  public carouselBeforeChange(event) {
    this.carouselActiveIndex = event.to;
  }

  public carouselChangeSlide(type: string) {
    this.nzCarousel[type]();
  }

  public onPlaySheet(id: number) {
    this.sheetService.playSheet(id).subscribe(songList => {
      this.store$.dispatch(PlayActions.SetSongList({songList}));
      this.store$.dispatch(PlayActions.SetPlayList({playList: songList}));
      this.store$.dispatch(PlayActions.SetCurrentIndex({currentIndex: 0}));
    });
  }

}
